<template>
    <div class="wms-in">
        <div class="clearfix text-r border-t-eded border-b-eded height-30 line-height-20 pl-20 pr-20">
            <a-button size="small" type="primary" icon="reload" class="mr-10" @click="tableReload"></a-button>
        </div>
        <div class="search-form border-b-eded pl-20 pr-20">
            <a-form layout="inline" size="small">
                <a-form-item label="关键字">
                    <a-input class="width-200" placeholder="请输入关键字" v-model="params.keywords" />
                </a-form-item>
                <a-form-item label="创建时间">
                    <a-range-picker
                            style="width:320px;margin-left:10px;"
                            showTime
                            :format="'YYYY-MM-DD HH:mm:ss'"
                            @change="onChangeTime"
                    />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" :loading="loadingSearch" @click="search">查询</a-button>
                </a-form-item>
            </a-form>
        </div>
        <div >
            <p-remote-vxe-table
                    ref="remoteTable"
                    :data-fun="dataFun"
                    @afterLoad="afterLoad"
                    @afterLoadErr="afterLoadErr"
                    :params="params">
                <template slot-scope="{tablePage, data, loading, handlePageChange, sortChangeEvent}" :params="params">
                    <vxe-grid
                            border
                            resizable
                            auto-resize
                            sync-resize
                            size="mini"
                            :height="tableHeight"
                            :loading="loading"
                            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
                            :pager-config="tablePage"
                            :columns="columns"
                            :sortConfig="{
                                remote: true,
                                trigger: 'cell',
                            }"
                            highlight-hover-row
                            highlight-current-row
                            highlight-hover-column
                            highlight-current-column
                            @sort-change="sortChangeEvent"
                            @page-change="handlePageChange"
                            :data="data">
                        <template v-slot:type="{row}">
                            <span v-if="row.type">已入库</span>
                            <span class="main-color" v-else>未入库</span>
                        </template>
                        <template v-slot:action="{ row, column }">
                            <div class="clearfix text-c">
                                <a-button size="small" type="primary" class="mr-10" @click="wmsInDetails(row)">详情</a-button>
                            </div>
                        </template>
                    </vxe-grid>
                </template>
            </p-remote-vxe-table>
        </div>
        <in-details-modal ref="inDetailsModal"></in-details-modal>
    </div>
</template>

<script>
    let defaultColumns = [
        // 对应自定义插槽的名称
        { type: 'seq', fixed: 'left', title: '序号', width: 60, noColumnsSet: true, resizable: false },
        { title: '创建时间', minWidth: 165, align: 'center', field: 'createdTime' },
        { title: '入库员', minWidth: 100, align: 'center', field: 'intoUserName' },
        { title: '供应商', minWidth: 120, align: 'center', field: 'provideName' },
        { title: '总入库数', minWidth: 120, align: 'center', field: 'totalNumber' },
        { title: '总金额', minWidth: 120, align: 'center', field: 'totalAmount' },
        { title: '入库状态', minWidth: 120, align: 'center', slots: {default: 'type'} },
        { title: '创建人', minWidth: 120, align: 'center', field: 'createdBy' },
        { title: '备注', minWidth: 165, align: 'center', field: 'remark' },
        { title: '操作', minWidth: 100, align: 'center', fixed: 'right', resizable: false, noColumnsSet: true, slots: { default: 'action'},},
    ];
    import inDetailsModal from './inDetailsModal';
    export default {
        components: {
            inDetailsModal,
        },
        data () {
            return {
                dataFun: this.$api.wms.listbywarehousein,
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: '',
                    type: true,
                    startTime: '',
                    endTime: '',
                },
                columns: JSON.parse(JSON.stringify(defaultColumns)),
                loadingSearch: false,
            };
        },
        methods: {
            afterLoad () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            afterLoadErr () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            search () {
                this.loadingSearch = true;
                this.params.pageNum = 1;
                this.tableReload();
            },
            tableReload () {
                this.$refs['remoteTable'].reload(this.params);
            },
            onChangeTime (val, dateString) {
                this.params.startTime = dateString[0];
                this.params.endTime = dateString[1];
            },
            //添加入库单
            exportTable () {
                this.$router.push({path: '/wms/add-wms-in'});
            },
            wmsInDetails (data) {
                this.$refs.inDetailsModal.show(data.id);
                // this.$router.push({path: `/wms/in-details/${data.id}`});
            },
            delWmsIn () {},
        }
    };
</script>

<style scoped lang="scss">

</style>
